<!--
 * @Author: LIZHAOJUN18 lizhaojun18@crdigital.com.cn
 * @Date: 2024-09-30 10:24:17
 * @LastEditors: LIZHAOJUN18 lizhaojun18@crdigital.com.cn
 * @LastEditTime: 2024-09-30 18:00:42
 * @FilePath: \console-web\src\views\trip\manager\customerMaster\customerMasterDetail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="detail-form" v-if="loadingFinish" >
    <Form :model="formInfo" ref="formInfo" class="ivu-form-no-margin-bottom form" :rules="rule" :label-width="120">
        <Row :gutter="32" class="code-row-bg">
        <Col span="8" style="border: none">
            <FormItem prop="customerShortName" label="所属客户简称">
                <Select :max-tag-count="2" v-model="formInfo.customerShortName"
                filterable placeholder="请选择所属客户简称" 
                @on-change="updateCustomerCrCode" clearable>
                <Option
                    v-for="item in listDataForCustomer"
                    :key="item.customerCrCode"
                    :value="item.customerShortName"
                    :label="item.customerShortName"
                >
                    <span>{{ item.customerShortName }}</span>
                    <span style="float:right;padding-right: 20px;color:#ccc;">{{ item.customerCrCode }}</span>
                </Option>
                </Select>
            </FormItem>
        </Col>
        <Col span="8" style="border: none">
            <FormItem prop="customerCrCode" label="客户编码">
                <Input v-model="formInfo.customerCrCode" :maxlength="50" 
                    placeholder="客户编码将自动填写" disabled>
                </Input>
            </FormItem>
        </Col>
        <Col span="8" style="border: none">
            <FormItem prop="costCenter2" label="成本中心2">
            <Input v-model="formInfo.costCenter2" :maxlength="50"  
                placeholder="请输入成本中心2" clearable>
            </Input>
            </FormItem>
        </Col>
        <Col span="8" style="border: none">
            <FormItem prop="ouCode" label="客商编码">
            <Input v-model="formInfo.ouCode" :maxlength="50" 
                placeholder="请输入客商编码" clearable>
            </Input>
            </FormItem>
        </Col>
        <Col span="8" style="border: none">
            <FormItem prop="ouName" label="客商名称">
            <Input v-model="formInfo.ouName" :maxlength="50" 
                placeholder="请输入客商名称" clearable>
            </Input>
            </FormItem>
        </Col>
        <Col span="8" style="border: none">
            <FormItem prop="invoiceTitle" label="发票抬头">
            <Input v-model="formInfo.invoiceTitle" :maxlength="50" 
                placeholder="请输入发票抬头" clearable>
            </Input>
            </FormItem>
        </Col>
        <Col span="8" style="border: none">
            <FormItem prop="isOverseas" label="境内/境外">
                <Select v-model="formInfo.isOverseas" placeholder="请选择境内/境外"  clearable >
                  <Option value="0">境外</Option>
                  <Option value="1">境内</Option>
                </Select>
            </FormItem>
        </Col>
        <Col span="8" style="border: none">
            <FormItem prop="billType" label="专票/普票">
                <Select v-model="formInfo.billType" placeholder="请选择专票/普票"  clearable >
                  <Option value="0">普票</Option>
                  <Option value="1">专票</Option>
                </Select>
            </FormItem>
        </Col>
        <Col span="8" style="border: none">
            <FormItem prop="ouProperty" label="集团内/外">
                <Select v-model="formInfo.ouProperty" placeholder="请选择集团内/外"  clearable >
                  <Option value="0">集团外</Option>
                  <Option value="1">集团内</Option>
                </Select>
            </FormItem>
        </Col>
        <Col span="8" style="border: none">
            <FormItem prop="isTrip" label="结算类型">
                <Select v-model="formInfo.isTrip" placeholder="请选择集团内/外"  clearable >
                  <Option value="0">非自动化</Option>
                  <Option value="1">自动化</Option>
                </Select>
            </FormItem>
        </Col>
        <Col span="8" style="border: none">
            <FormItem prop="taxId" label="纳税人识别号">
            <Input v-model="formInfo.taxId" :maxlength="50" 
                placeholder="请输入纳税人识别号" clearable>
            </Input>
            </FormItem>
        </Col>
        <Col span="8" style="border: none">
            <FormItem prop="bankName" label="开户行">
            <Input v-model="formInfo.bankName" :maxlength="50" 
                placeholder="请输入开户行" clearable>
            </Input>
            </FormItem>
        </Col>
        <Col span="8" style="border: none">
            <FormItem prop="bankNo" label="开户行账号">
            <Input v-model="formInfo.bankNo" :maxlength="50" 
                placeholder="请输入开户行账号" clearable>
            </Input>
            </FormItem>
        </Col>
        <Col span="8" style="border: none">
            <FormItem prop="address" label="注册地址">
            <Input v-model="formInfo.address" :maxlength="50" 
                placeholder="请输入注册地址" clearable>
            </Input>
            </FormItem>
        </Col>
        <Col span="8" style="border: none">
            <FormItem prop="isFullElecinvoice" label="是否开全电发票">
                <Select v-model="formInfo.isFullElecinvoice" placeholder="请选择是否开全电发票"  clearable >
                  <Option value="0">不开全电</Option>
                  <Option value="1">开全电</Option>
                </Select>
            </FormItem>
        </Col>
        <Col span="8" style="border: none">
            <FormItem prop="phone" label="固定电话">
            <Input v-model="formInfo.phone" :maxlength="50" 
                placeholder="请输入固定电话" clearable>
            </Input>
            </FormItem>
        </Col>
        <Col span="8" style="border: none">
            <FormItem prop="contacts" label="联系人">
            <Input v-model="formInfo.contacts" :maxlength="50" 
                placeholder="请输入联系人" clearable>
            </Input>
            </FormItem>
        </Col>
        <Col span="12" style="border: none">
            <FormItem prop="remark" label="备注">
            <Input v-model="formInfo.remark" :maxlength="50" 
                placeholder="请输入备注" clearable>
            </Input>
            </FormItem>
        </Col>
        </Row> 
    </Form>
    </div>
</template>
<script>
  import { apiTrainOuAdd } from '@api/trip/standard/customerMaster.js'
  import debounce from "lodash/debounce";
  export default {
    name: 'trip-train-customerMaster-detail',
    components: { 
    },
    props: { 
        TrainOu: {
        type: Object, 
      },
      listDataForCustomer:{
        type: Array,
      },
      disabled:{
        type:Boolean,
        default:false, 
        required: false,
      }
    },
    data() { 
      return { 
        loadingFinish:false, 
        formInfo: { 
            customerShortName: '', //所属客户简称
            customerCrCode: '', //所属客户编码
            costCenter2: '', //成本中心2
            ouName: '', //客商名称
            ouCode: '', //客商编码
            invoiceTitle: '', //发票抬头
            taxId: '', //纳税人识别号
            billType: '', //专票/普票
            isOverseas: '', //境内/境外是否境外 1：境内 0:境外'
            ouProperty: '', // 是否是华润集团内单位,1是，0不是'
            isTrip: '', // 是否自动结算
            bankName: '', //开户行
            bankNo: '', //开户行账号
            address: '', //注册地址
            bankisFullElecinvoiceName: '', //不开全电
            phone: '', //固定电话
            contacts: '', //联系人
            remark: '', //备注
        },
        rule: {
            customerShortName: [{ required: true, message: '请输入客户简称', trigger: 'blur' }], 
            customerCrCode: [{ required: true, message: '请输入客户编码', trigger: 'blur' }], 
            costCenter2: [{ required: true, message: '请输入成本中心2', trigger: 'blur' }], 
            ouCode: [{ required: true, message: '请输入客商编码', trigger: 'blur' }], 
            ouName: [{ required: true, message: '请输入客商名称', trigger: 'blur' }], 
            invoiceTitle: [{required: true, message: '请输入发票抬头', trigger: 'blur' }], 
            taxId: [{required: true, message: '请输入纳税人识别号', trigger: 'blur' }], 
        },
        actions: [
          {
            /**
              text: "按钮label",
              theme: "warning",
              icon: "plus-round",
              action: "actionName1", //可以通过 SetActionsState  actionName1 的 state 来设置这个按钮是否 loading
          */
            text: this.$t('common.save'),
            theme: 'primary',
            action:"save",
            handle: debounce(()=>this.handleSave(),300),
            loading: false
          },
          {
            text: this.$t('common.close'),
            handle: () => {
              this.$emit('Close')
            }
          }
        ],
      }
    },
    computed: { 
    },
    created: function() {
      this.$Spin.show({
          render: (h) => {
              return h('div', [
                  h('Icon', {
                      'class': 'spin-icon-load',
                      props: {
                          type: 'ios-loading',
                          size: 18
                      }
                  }),
                  h('div', '加载中...')
              ])
          }
      });
      //#region  sidelipPage 配置
      if (this?.TrainOu?.id) {
        this.$emit('SetTitle', '编辑火车成本中心')
      } else {
        this.$emit('SetTitle', '新增火车成本中心')
      }
      this.$emit('SetPageWidth', 700)
      this.$emit('SetPageActions', this.actions)
      //#endregion
      this.init() 
    },
    mounted: function() {},
    methods: {  
      init() { 
        console.log('this.TrainOu :>> ', this.TrainOu);
        console.log('this.listDataForCustomer :>> ', this.listDataForCustomer);
        if (this?.TrainOu?.id) {
           this.formInfo = Object.assign({},this.TrainOu);
        }
        this.$Spin.hide();
        this.loadingFinish = true;  
      },
      handleSave() {
        this.$refs['formInfo'].validate(valid => {
          if (valid) {
            this.actions[0].loading = true
            let param = this.formInfo
            apiTrainOuAdd(param)
            .then(data => {
                console.log('保存失败 :>> ', data);
                this.actions[0].loading = false
                if (data.code === "0") {
                this.$message.success({
                    content: '保存成功',
                    duration: 3
                });
                this.$emit('Close', true); 
                } else {
                this.$message.error({
                    content: data.message || "保存失败",
                    duration: 3
                });
                }  
            })
            .catch(data => {
            this.actions[0].loading = false 
            })
          }
        })
      },
      updateCustomerCrCode(value) {
            const selectedItem = this.listDataForCustomer.find(item => item.customerShortName === value);
            if (selectedItem) {
                this.formInfo.customerCrCode = selectedItem.customerCrCode;
            }
       },
    }
  }
  </script>
  <style scoped lang="less">
  .detail-form {
    background: #f4f6fd;
    .form {
      background: #fff;
      padding: 24px 24px 12px 24px;
      .ivu-row {
        margin-bottom: 0px;
        .last-item {
          margin-bottom: 0px;
        }
      }
      .form-title {
        display: block;
        font-size: 16px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 600;
      }
    }
  }
  </style>
</script>